<template>
  <el-card shadow="never" :body-style="{ padding: '20px', height: '610px' }">
    <div class="header f-jc-sb">
      <h3 class="xl">客户标签</h3>
      <el-button type="primary" size="default" @click="" >添加标签组</el-button>
    </div>
    <div class="content">
      <span class="total">共 4 条</span>
      <common-table :tableColumn="labelData.tableColumn" :tableData="labelData.tableData" class="m-t-20">
        <template #tag="{row}">
          <div class="tagWrap m-t-10 m-b-10">
            <el-tag v-for="item in row.label" :key="item" class="m-r-10 p-5" type="primary">{{ item }}</el-tag>
            <el-tag type="primary">
              <el-icon class="m-5"><Plus /></el-icon>
            </el-tag>
          </div>
        </template>
      </common-table>
    </div>
  </el-card>

</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const labelData = reactive({
  tableColumn: [
    {label: '标签组名称', prop: 'labelGroup', type: 'default', width: '240px', align: 'left', template: 'text'},
    {label: '标签', prop: 'label', type: 'default',  align: 'left', template: 'tag'},
    {label: '排序', prop: 'sort', type: 'default', width: '100px', align: 'left', template: 'text'},
    {label: '操作', prop: 'action', type: 'default', width: '120px', align: 'left', template: 'text'},
  ],
  tableData: [
    {labelGroup: '客户类型', label: ['小客户', '重点客户', '方法'], sort: 0},
    {labelGroup: '客户级别', label: ['A', 'B', 'C'], sort: 1},
    {labelGroup: '成交状态', label: ['已成交', '意向客户', '复购客户', '已注销'], sort: 2},
    {labelGroup: '客户规模', label: ['个人', '企业', '组织'], sort: 3},
  ]
})
</script>

<style lang="scss" scoped>

</style>